<template>
  <div class="broadcast-schedule-view">
    <!-- 顶部控制区 -->
    <div class="broadcast-header">
      <div class="header-left">
        <h2>广播调度中心</h2>
        <div class="broadcast-status">
          <span class="status-item">
            <span class="status-dot online"></span>
            在线设备: {{ onlineTerminals }}
          </span>
          <span class="status-item">
            <span class="status-dot offline"></span>
            离线设备: {{ offlineTerminals }}
          </span>
          <span class="status-item">
            <span class="status-dot active"></span>
            播放中: {{ activeBroadcasts }}
          </span>
        </div>
      </div>

      <div class="header-actions">
        <button class="emergency-btn" @click="showEmergencyDialog = true">
          <svg viewBox="0 0 24 24">
            <path
              d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A1.5,1.5 0 0,1 10.5,15.5A1.5,1.5 0 0,1 12,14A1.5,1.5 0 0,1 13.5,15.5A1.5,1.5 0 0,1 12,17M12,10.5A1.5,1.5 0 0,0 10.5,12L11,16H13L12.5,12A1.5,1.5 0 0,0 12,10.5Z"
              fill="currentColor" />
          </svg>
          紧急广播
        </button>
        <button class="action-btn" @click="testAllTerminals">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7"
              fill="currentColor" />
          </svg>
          终端测试
        </button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="broadcast-content">
      <!-- 左侧区域选择 -->
      <div class="area-panel">
        <div class="panel-header">
          <h3>广播设备</h3>
          <div class="area-actions">
            <button class="select-btn" @click="selectAllAreas">
              <svg viewBox="0 0 24 24">
                <path d="M7,10L12,15L17,10H7Z" fill="currentColor" />
              </svg>
              全选
            </button>
            <button class="select-btn" @click="clearAllAreas">
              <svg viewBox="0 0 24 24">
                <path
                  d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
                  fill="currentColor" />
              </svg>
              清空
            </button>
          </div>
        </div>

        <div class="area-list">
          <div v-for="area in broadcastList" :key="area.id" class="area-item"
            :class="{ selected: selectedAreas.includes(area.id) }" @click="toggleArea(area.id)">
            <div class="area-info">
              <div class="area-name">{{ area.device_name }}</div>
              <div class="area-details">
                <div class="mac-text">MAC：{{ area.mac_address }}</div>
                <div class="status-tag" :class="`status-${area.maintenance_status}`">{{ filterText(area.maintenance_status) }}</div>
              </div>
            </div>
            <div class="area-status">
              <div class="status-indicator" :class="`indicator-${area.maintenance_status}`"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间广播控制 -->
      <div class="control-panel">
        <div class="panel-header">
          <h3>广播控制</h3>
          <div class="mode-selector">
            <button v-for="mode in broadcastModes" :key="mode.id" class="mode-btn"
              :class="{ active: activeMode === mode.id }" :data-mode="mode.id" @click="activeMode = mode.id">
              <svg v-if="mode.id === 'live'" viewBox="0 0 24 24">
                <path
                  d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z"
                  fill="currentColor" />
              </svg>
              <svg v-if="mode.id === 'scheduled'" viewBox="0 0 24 24">
                <path
                  d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z"
                  fill="currentColor" />
              </svg>
              <svg v-if="mode.id === 'file'" viewBox="0 0 24 24">
                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
                  fill="currentColor" />
              </svg>
              {{ mode.name }}
            </button>
          </div>
        </div>

        <!-- 实时广播 -->
        <div v-if="activeMode === 'live'" class="broadcast-form">
          <div class="form-group">
            <label>广播内容</label>
            <textarea v-model="broadcastContent" placeholder="请输入广播内容..." class="broadcast-textarea"></textarea>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>音量</label>
              <div class="volume-control">
                <input type="range" v-model="broadcastVolume" min="0" max="100" class="volume-slider" />
                <span class="volume-value">{{ broadcastVolume }}%</span>
              </div>
            </div>

            <div class="form-group">
              <label>重复次数</label>
              <select v-model="repeatTimes" class="form-select">
                <option value="1">播放1次</option>
                <option value="2">播放2次</option>
                <option value="3">播放3次</option>
                <option value="0">循环播放</option>
              </select>
            </div>
          </div>

          <div class="broadcast-actions">
            <button class="broadcast-btn primary" @click="startBroadcast">
              <svg viewBox="0 0 24 24">
                <path d="M8,5.14V19.14L19,12.14L8,5.14Z" fill="currentColor" />
              </svg>
              开始广播
            </button>
            <button class="broadcast-btn" @click="pauseBroadcast">
              <svg viewBox="0 0 24 24">
                <path d="M14,19H18V5H14M6,19H10V5H6V19Z" fill="currentColor" />
              </svg>
              暂停
            </button>
            <button class="broadcast-btn secondary" @click="stopBroadcast">
              <svg viewBox="0 0 24 24">
                <path d="M18,18H6V6H18V18Z" fill="currentColor" />
              </svg>
              停止
            </button>
          </div>
        </div>

        <!-- 定时广播 -->
        <div v-if="activeMode === 'scheduled'" class="broadcast-form">
          <div class="form-group">
            <label>广播内容</label>
            <textarea v-model="scheduledContent" placeholder="请输入定时广播内容..." class="broadcast-textarea"></textarea>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>开始时间</label>
              <input type="datetime-local" v-model="scheduleTime" class="form-input" />
            </div>

            <div class="form-group">
              <label>重复模式</label>
              <select v-model="scheduleRepeat" class="form-select">
                <option value="once">仅一次</option>
                <option value="daily">每天</option>
                <option value="weekly">每周</option>
                <option value="custom">自定义</option>
              </select>
            </div>
          </div>

          <div class="broadcast-actions">
            <button class="broadcast-btn primary" @click="addSchedule">
              <svg viewBox="0 0 24 24">
                <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor" />
              </svg>
              添加定时
            </button>
          </div>
        </div>

        <!-- 文件播放 -->
        <div v-if="activeMode === 'file'" class="broadcast-form">
          <div class="form-group">
            <label>选择音频文件</label>
            <div class="file-selector">
              <input type="file" @change="handleFileSelect" accept="audio/*" class="file-input" id="audioFile" />
              <label for="audioFile" class="file-label">
                <svg viewBox="0 0 24 24">
                  <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
                    fill="currentColor" />
                </svg>
                选择文件
              </label>
              <span class="file-name">{{ selectedFileName || '未选择文件' }}</span>
            </div>
          </div>

          <div v-if="selectedFile" class="audio-preview">
            <audio :src="audioPreviewUrl" controls class="audio-player"></audio>
          </div>

          <div class="broadcast-actions">
            <button class="broadcast-btn primary" @click="playAudioFile" :disabled="!selectedFile">
              <svg viewBox="0 0 24 24">
                <path d="M8,5.14V19.14L19,12.14L8,5.14Z" fill="currentColor" />
              </svg>
              播放文件
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧队列和历史 -->
      <div class="info-panel queue-panel">
        <div class="panel-tabs">
          <button class="tab-btn" :class="{ active: activeTab === 'queue' }" @click="activeTab = 'queue'">
            播放队列 ({{ broadcastQueue.length }})
          </button>
          <button class="tab-btn" :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">
            历史记录
          </button>
        </div>

        <!-- 播放队列 -->
        <div v-if="activeTab === 'queue'" class="queue-content">
          <div v-for="(item, index) in broadcastQueue" :key="item.id" class="queue-item"
            :class="{ active: item.status === 'playing' }">
            <div class="queue-info">
              <div class="queue-title">{{ item.title }}</div>
              <div class="queue-details">
                <span class="queue-type">{{ item.type }}</span>
                <span class="queue-time">{{ formatTime(item.scheduledTime) }}</span>
              </div>
            </div>
            <div class="queue-actions">
              <button class="queue-btn" @click="moveUp(index)" :disabled="index === 0">
                <svg viewBox="0 0 24 24">
                  <path d="M7,14L12,9L17,14H7Z" fill="currentColor" />
                </svg>
              </button>
              <button class="queue-btn" @click="moveDown(index)" :disabled="index === broadcastQueue.length - 1">
                <svg viewBox="0 0 24 24">
                  <path d="M7,10L12,15L17,10H7Z" fill="currentColor" />
                </svg>
              </button>
              <button class="queue-btn danger" @click="removeFromQueue(index)">
                <svg viewBox="0 0 24 24">
                  <path
                    d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
                    fill="currentColor" />
                </svg>
              </button>
            </div>
          </div>

          <div v-if="broadcastQueue.length === 0" class="empty-queue">
            <svg viewBox="0 0 24 24">
              <path
                d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A1.5,1.5 0 0,1 10.5,15.5A1.5,1.5 0 0,1 12,14A1.5,1.5 0 0,1 13.5,15.5A1.5,1.5 0 0,1 12,17M12,10.5A1.5,1.5 0 0,0 10.5,12L11,16H13L12.5,12A1.5,1.5 0 0,0 12,10.5Z"
                fill="currentColor" />
            </svg>
            <span>暂无播放任务</span>
          </div>
        </div>

        <!-- 历史记录 -->
        <div v-if="activeTab === 'history'" class="history-content">
          <div v-for="record in broadcastHistory" :key="record.id" class="history-item">
            <div class="history-info">
              <div class="history-title">{{ record.title }}</div>
              <div class="history-details">
                <span class="history-time">{{ formatDateTime(record.time) }}</span>
                <span class="history-duration">{{ record.duration }}</span>
              </div>
            </div>
            <div class="history-status" :class="record.status">
              {{ getStatusText(record.status) }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 紧急广播对话框 -->
    <div v-if="showEmergencyDialog" class="emergency-dialog-overlay" @click="showEmergencyDialog = false">
      <div class="emergency-dialog" @click.stop>
        <div class="dialog-header">
          <h3>紧急广播</h3>
          <button class="close-btn" @click="showEmergencyDialog = false">
            <svg viewBox="0 0 24 24">
              <path
                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
                fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="dialog-content">
          <div class="form-group">
            <label>紧急类型</label>
            <select v-model="emergencyType" class="form-select">
              <option value="fire">火灾警报</option>
              <option value="evacuation">紧急疏散</option>
              <option value="weather">恶劣天气</option>
              <option value="security">安全警示</option>
              <option value="custom">自定义</option>
            </select>
          </div>

          <div class="form-group">
            <label>广播内容</label>
            <textarea v-model="emergencyContent" placeholder="请输入紧急广播内容..." class="broadcast-textarea"></textarea>
          </div>
        </div>

        <div class="dialog-actions">
          <button class="dialog-btn primary" @click="startEmergencyBroadcast">
            立即广播
          </button>
          <button class="dialog-btn secondary" @click="showEmergencyDialog = false">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

import api from '@/api'

import useDataStore from '@/stores/data.js';
import { storeToRefs } from 'pinia';
const store = useDataStore();
const { broadcastList } = storeToRefs(store)

// 响应式数据
const showEmergencyDialog = ref(false)
const selectedAreas = ref(['area_001', 'area_002'])
const activeMode = ref('live')
const activeTab = ref('queue')
const broadcastContent = ref('')
const broadcastVolume = ref(80)
const repeatTimes = ref(1)
const scheduledContent = ref('')
const scheduleTime = ref('')
const scheduleRepeat = ref('once')
const selectedFile = ref(null)
const selectedFileName = ref('')
const audioPreviewUrl = ref('')
const emergencyType = ref('fire')
const emergencyContent = ref('')

// 广播区域数据
const broadcastAreas = ref([
  {
    id: 'area_001',
    name: '三圣岛景区',
    terminals: ['terminal_001', 'terminal_002', 'terminal_003'],
    coverage: '观音像周边',
    status: 'online'
  },
  {
    id: 'area_002',
    name: '莲花岛',
    terminals: ['terminal_004', 'terminal_005'],
    coverage: '整个岛屿',
    status: 'online'
  },
  {
    id: 'area_003',
    name: '湿地公园',
    terminals: ['terminal_006', 'terminal_007', 'terminal_008'],
    coverage: '主要步道',
    status: 'online'
  },
  {
    id: 'area_004',
    name: '码头区域',
    terminals: ['terminal_009'],
    coverage: '候船区',
    status: 'offline'
  },
  {
    id: 'area_005',
    name: '商业街',
    terminals: ['terminal_010', 'terminal_011'],
    coverage: '购物区',
    status: 'online'
  }
])

// 广播模式
const broadcastModes = ref([
  { id: 'live', name: '实时广播' },
  { id: 'scheduled', name: '定时广播' },
  { id: 'file', name: '文件播放' }
])

// 播放队列
const broadcastQueue = ref([
  {
    id: 'queue_001',
    title: '景区开放时间提醒',
    type: '定时广播',
    scheduledTime: new Date(Date.now() + 300000),
    status: 'waiting'
  },
  {
    id: 'queue_002',
    title: '安全注意事项',
    type: '实时广播',
    scheduledTime: new Date(Date.now() + 600000),
    status: 'waiting'
  }
])

// 历史记录
const broadcastHistory = ref([
  {
    id: 'history_001',
    title: '游客安全提醒',
    time: new Date(Date.now() - 3600000),
    duration: '2分30秒',
    status: 'completed'
  },
  {
    id: 'history_002',
    title: '景区导览广播',
    time: new Date(Date.now() - 7200000),
    duration: '5分15秒',
    status: 'completed'
  },
  {
    id: 'history_003',
    title: '紧急疏散通知',
    time: new Date(Date.now() - 10800000),
    duration: '1分45秒',
    status: 'interrupted'
  }
])

// 计算属性
const onlineTerminals = computed(() => {
  return broadcastAreas.value
    .filter(area => area.status === 'online')
    .reduce((total, area) => total + area.terminals.length, 0)
})

const offlineTerminals = computed(() => {
  return broadcastAreas.value
    .filter(area => area.status === 'offline')
    .reduce((total, area) => total + area.terminals.length, 0)
})

const activeBroadcasts = computed(() => {
  return broadcastQueue.value.filter(item => item.status === 'playing').length
})

// 方法
const toggleArea = (areaId) => {
  const index = selectedAreas.value.indexOf(areaId)
  if (index > -1) {
    selectedAreas.value.splice(index, 1)
  } else {
    selectedAreas.value.push(areaId)
  }
}

const selectAllAreas = () => {
  selectedAreas.value = broadcastAreas.value
    .filter(area => area.status === 'online')
    .map(area => area.id)
}

const clearAllAreas = () => {
  selectedAreas.value = []
}

const startBroadcast = () => {
  if (!broadcastContent.value.trim()) {
    alert('请输入广播内容')
    return
  }

  if (selectedAreas.value.length === 0) {
    alert('请选择广播区域')
    return
  }

  console.log('开始广播:', {
    content: broadcastContent.value,
    areas: selectedAreas.value,
    volume: broadcastVolume.value,
    repeat: repeatTimes.value
  })

  // 添加到队列
  broadcastQueue.value.unshift({
    id: `queue_${Date.now()}`,
    title: broadcastContent.value.substring(0, 20) + '...',
    type: '实时广播',
    scheduledTime: new Date(),
    status: 'playing'
  })
}

const pauseBroadcast = () => {
  console.log('暂停广播')
}

const stopBroadcast = () => {
  console.log('停止广播')
}

const addSchedule = () => {
  if (!scheduledContent.value.trim() || !scheduleTime.value) {
    alert('请填写完整的定时广播信息')
    return
  }

  broadcastQueue.value.push({
    id: `schedule_${Date.now()}`,
    title: scheduledContent.value.substring(0, 20) + '...',
    type: '定时广播',
    scheduledTime: new Date(scheduleTime.value),
    status: 'scheduled'
  })

  scheduledContent.value = ''
  scheduleTime.value = ''
}

const handleFileSelect = (event) => {
  const file = event.target.files[0]
  if (file) {
    selectedFile.value = file
    selectedFileName.value = file.name
    audioPreviewUrl.value = URL.createObjectURL(file)
  }
}

const playAudioFile = () => {
  if (!selectedFile.value) {
    alert('请选择音频文件')
    return
  }

  broadcastQueue.value.unshift({
    id: `file_${Date.now()}`,
    title: selectedFileName.value,
    type: '文件播放',
    scheduledTime: new Date(),
    status: 'playing'
  })
}

const testAllTerminals = () => {
  console.log('测试所有终端')
}

const startEmergencyBroadcast = () => {
  if (!emergencyContent.value.trim()) {
    alert('请输入紧急广播内容')
    return
  }

  // 选择所有在线区域
  selectAllAreas()

  // 立即开始紧急广播
  broadcastQueue.value.unshift({
    id: `emergency_${Date.now()}`,
    title: `【紧急】${emergencyContent.value.substring(0, 15)}...`,
    type: '紧急广播',
    scheduledTime: new Date(),
    status: 'playing'
  })

  showEmergencyDialog.value = false
  emergencyContent.value = ''
}

const moveUp = (index) => {
  if (index > 0) {
    const item = broadcastQueue.value.splice(index, 1)[0]
    broadcastQueue.value.splice(index - 1, 0, item)
  }
}

const moveDown = (index) => {
  if (index < broadcastQueue.value.length - 1) {
    const item = broadcastQueue.value.splice(index, 1)[0]
    broadcastQueue.value.splice(index + 1, 0, item)
  }
}

const removeFromQueue = (index) => {
  broadcastQueue.value.splice(index, 1)
}

const formatTime = (date) => {
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatDateTime = (date) => {
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getStatusText = (status) => {
  const statusMap = {
    'completed': '已完成',
    'interrupted': '已中断',
    'failed': '播放失败'
  }
  return statusMap[status] || status
}

const filterText = (type) => {
  const statusMap = {
    '1': '正常',
    '2': '需要维护',
    '3': '维护中',
    '4': '报废',
  }
  return statusMap[type] || ''
}

const getData = async () => {
  let listData = await api.exampleApi.getBroadcastList({ page: 1, pageSize: 1000 })
  broadcastList.value = listData.list || []

}

// 生命周期
onMounted(() => {
  getData()
  // 设置默认定时时间为当前时间后1小时
  const now = new Date()
  now.setHours(now.getHours() + 1)
  scheduleTime.value = now.toISOString().slice(0, 16)
})
</script>

<style scoped>
/* CSS变量定义 */
:root {
  --primary-green: #00ff88;
  --secondary-green: #00d4aa;
  --accent-green: #4caf50;
  --dark-green: #1b5e20;
  --light-green: #e8f5e8;
  --water-blue: #00bcd4;
  --nature-gold: #ffab40;
  --bg-primary: rgba(13, 27, 42, 0.95);
  --bg-secondary: rgba(0, 50, 30, 0.85);
  --glass-bg: rgba(0, 255, 136, 0.08);
  --border-color: rgba(0, 255, 136, 0.3);
}

.broadcast-schedule-view {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: linear-gradient(135deg,
      rgba(13, 27, 42, 0.95) 0%,
      rgba(0, 50, 30, 0.85) 50%,
      rgba(13, 27, 42, 0.95) 100%),
    url('@/assets/images/jingqu.jpg') center center / cover no-repeat;
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  display: flex;
  flex-direction: column;
  z-index: 2;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.broadcast-schedule-view::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,
      rgba(0, 255, 136, 0.1) 0%,
      rgba(0, 50, 30, 0.3) 50%,
      rgba(13, 27, 42, 0.4) 100%);
  z-index: 0;
  pointer-events: none;
}

/* 顶部控制区 */
.broadcast-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

.header-left h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-green);
  text-shadow: 0 0 20px var(--primary-green);
}

.broadcast-status {
  display: flex;
  gap: 24px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #7a8699;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.online {
  background: #00ff88;
}

.status-dot.offline {
  background: #ff4757;
}

.status-dot.active {
  background: #00ff88;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.header-actions {
  display: flex;
  gap: 12px;
}

.emergency-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.emergency-btn:hover {
  background: linear-gradient(135deg, #ff3742 0%, #ff2838 100%);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
  transform: translateY(-1px);
}

.emergency-btn svg {
  width: 18px;
  height: 18px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.action-btn:hover {
  background: var(--primary-green);
  color: #0f1419;
  border-color: var(--primary-green);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

/* 主要内容区域 */
.broadcast-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
}

/* 响应式外边距 */
@media (max-width: 1440px) {
  .broadcast-schedule-view {
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .broadcast-content {
    gap: 12px;
    padding: 12px;
  }

  .area-panel {
    width: 260px;
  }

  /* 调整中间控制面板 */
  .control-panel {
    min-width: 400px;
    flex: 1;
  }

  /* 调整右侧信息面板 */
  .info-panel {
    width: 300px;
    min-width: 280px;
  }
}

@media (max-width: 1200px) {
  .broadcast-schedule-view {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .broadcast-content {
    gap: 10px;
    padding: 10px;
  }

  .area-panel {
    width: 240px;
  }

  .control-panel {
    min-width: 350px;
  }

  .info-panel {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .broadcast-schedule-view {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .broadcast-content {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }

  .area-panel {
    width: 100%;
    height: 300px;
    order: 2;
  }

  .control-panel {
    width: 100%;
    order: 1;
  }

  .info-panel {
    width: 100%;
    order: 3;
  }
}

/* 左侧区域面板 */
.area-panel {
  width: 300px;
  min-width: 260px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(0, 255, 136, 0.12);
  border-bottom: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-green);
  text-shadow: 0 0 15px var(--primary-green);
}

.area-actions {
  display: flex;
  gap: 8px;
}

.select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 212, 170, 0.05) 100%);
  border: 2px solid rgba(0, 255, 136, 0.25);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.select-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.3), transparent);
  transition: left 0.5s ease;
}

.select-btn:hover::before {
  left: 100%;
}

.select-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.18) 0%, rgba(0, 212, 170, 0.12) 100%);
  border-color: var(--primary-green);
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 20px rgba(0, 255, 136, 0.3),
    0 0 20px rgba(0, 255, 136, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.select-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 3px 12px rgba(0, 255, 136, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.select-btn svg {
  width: 14px;
  height: 14px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.select-btn:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.5));
}

.area-list {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.area-list::-webkit-scrollbar {
  width: 6px;
}

.area-list::-webkit-scrollbar-track {
  background: #1a1f2e;
}

.area-list::-webkit-scrollbar-thumb {
  background: #3d4751;
  border-radius: 3px;
}

.area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--glass-bg);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.area-item:hover {
  background: rgba(0, 255, 136, 0.15);
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateX(3px);
}

.area-item.selected {
  background: rgba(0, 255, 136, 0.2);
  border-color: var(--primary-green);
  box-shadow: 0 5px 20px rgba(0, 255, 136, 0.3);
}

.area-name {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4px;
}

.area-details {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #7a8699;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  background: #00e67600;
  font-weight: 500;
  min-width: 48px;
  text-align: center;
  border: none;
}
.status-1 {
  background: rgba(0, 255, 136, 0.18); /* 浅绿色 */
  color: #00ff88;
}
.status-2 {
  background: rgba(255, 193, 7, 0.18); /* 浅橙色 */
  color: #ffb300;
}
.status-3 {
  background: rgba(0, 188, 212, 0.18); /* 浅蓝色 */
  color: #00bcd4;
}
.status-4 {
  background: rgba(120, 120, 120, 0.18); /* 灰色 */
  color: #bdbdbd;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-indicator.indicator-1 {
  background: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.18);
}

.status-indicator.indicator-2 {
  background: #ffb300;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.18);
}

.status-indicator.indicator-3 {
  background: #00bcd4;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.18);
}

.status-indicator.indicator-4 {
  background: #787878;
  box-shadow: 0 0 8px rgba(120, 120, 120, 0.18);
}

/* 中间控制面板 */
.control-panel {
  flex: 1;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.mode-selector {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  backdrop-filter: blur(15px);
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.08) 0%, rgba(0, 212, 170, 0.05) 100%);
  border: 2px solid rgba(0, 255, 136, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  min-width: 90px;
  justify-content: center;
}

.mode-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.25), transparent);
  transition: left 0.6s ease;
}

.mode-btn:hover::before {
  left: 100%;
}

.mode-btn:hover {
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
}

/* 不同模式的悬停增强效果 */
.mode-btn[data-mode="live"]:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 212, 170, 0.12) 100%);
  border-color: rgba(0, 255, 136, 0.4);
  box-shadow:
    0 6px 20px rgba(0, 255, 136, 0.25),
    0 0 20px rgba(0, 255, 136, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.mode-btn[data-mode="scheduled"]:hover {
  background: linear-gradient(135deg, rgba(0, 188, 212, 0.15) 0%, rgba(0, 151, 167, 0.12) 100%);
  border-color: rgba(0, 188, 212, 0.4);
  box-shadow:
    0 6px 20px rgba(0, 188, 212, 0.25),
    0 0 20px rgba(0, 188, 212, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgba(0, 188, 212, 0.4);
}

.mode-btn[data-mode="file"]:hover {
  background: linear-gradient(135deg, rgba(255, 171, 64, 0.15) 0%, rgba(255, 149, 0, 0.12) 100%);
  border-color: rgba(255, 171, 64, 0.4);
  box-shadow:
    0 6px 20px rgba(255, 171, 64, 0.25),
    0 0 20px rgba(255, 171, 64, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgba(255, 171, 64, 0.4);
}

/* 悬停时的图标效果 */
.mode-btn[data-mode="live"]:hover svg {
  filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.5));
}

.mode-btn[data-mode="scheduled"]:hover svg {
  filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.5));
}

.mode-btn[data-mode="file"]:hover svg {
  filter: drop-shadow(0 0 8px rgba(255, 171, 64, 0.5));
}

.mode-btn.active {
  font-weight: 700;
  transform: translateY(-1px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mode-btn.active::before {
  display: none;
}

/* 实时广播 - 绿色主题 */
.mode-btn.active[data-mode="live"] {
  background: linear-gradient(135deg, #00ff88 0%, #00e676 100%);
  border-color: #00ff88;
  color: #ffffff;
  box-shadow:
    0 8px 25px rgba(0, 255, 136, 0.5),
    0 0 30px rgba(0, 255, 136, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 定时广播 - 蓝色主题 */
.mode-btn.active[data-mode="scheduled"] {
  background: linear-gradient(135deg, #00bcd4 0%, #0288d1 100%);
  border-color: #00bcd4;
  color: #ffffff;
  box-shadow:
    0 8px 25px rgba(0, 188, 212, 0.5),
    0 0 30px rgba(0, 188, 212, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 文件播放 - 金色主题 */
.mode-btn.active[data-mode="file"] {
  background: linear-gradient(135deg, #ffab40 0%, #ff9800 100%);
  border-color: #ffab40;
  color: #ffffff;
  box-shadow:
    0 8px 25px rgba(255, 171, 64, 0.5),
    0 0 30px rgba(255, 171, 64, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mode-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 3px 12px rgba(0, 255, 136, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mode-btn svg {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.mode-btn:hover svg {
  transform: scale(1.1);
}

/* 选中状态图标样式 */
.mode-btn.active svg {
  transform: scale(1.05);
}

.mode-btn.active[data-mode="live"] svg {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.mode-btn.active[data-mode="scheduled"] svg {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.mode-btn.active[data-mode="file"] svg {
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.2));
}

.broadcast-form {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.broadcast-form::-webkit-scrollbar {
  width: 6px;
}

.broadcast-form::-webkit-scrollbar-track {
  background: #1a1f2e;
}

.broadcast-form::-webkit-scrollbar-thumb {
  background: #3d4751;
  border-radius: 3px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.broadcast-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.broadcast-textarea:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 12px;
}

.volume-slider {
  flex: 1;
  height: 6px;
  background: #3d4751;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #00ff88;
  border-radius: 50%;
  cursor: pointer;
}

.volume-value {
  font-size: 14px;
  color: #00ff88;
  font-weight: 500;
  min-width: 40px;
}

.form-select,
.form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.form-select:focus,
.form-input:focus {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.file-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-input {
  display: none;
}

.file-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #2a3441;
  border: 1px solid #3d4751;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.file-label:hover {
  background: #3d4751;
}

.file-label svg {
  width: 16px;
  height: 16px;
}

.file-name {
  flex: 1;
  font-size: 14px;
  color: #7a8699;
}

.audio-preview {
  margin-top: 12px;
}

.audio-player {
  width: 100%;
  height: 40px;
}

.broadcast-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.broadcast-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #2a3441;
  border: 1px solid #3d4751;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.broadcast-btn:hover {
  background: #3d4751;
}

.broadcast-btn.primary {
  background: linear-gradient(135deg, #00ff88 0%, #00d4aa 100%);
  border-color: #00ff88;
  color: #0f1419;
}

.broadcast-btn.primary:hover {
  background: linear-gradient(135deg, #00d4aa 0%, #00b896 100%);
}

.broadcast-btn.secondary {
  background: #ff4757;
  border-color: #ff4757;
}

.broadcast-btn.secondary:hover {
  background: #ff3742;
}

.broadcast-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.broadcast-btn svg {
  width: 16px;
  height: 16px;
}

/* 右侧队列面板 */
.queue-panel {
  width: 350px;
  min-width: 300px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

.info-panel {
  width: 350px;
  min-width: 300px;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid #2a3441;
}

.tab-btn {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  color: #7a8699;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active {
  color: #00ff88;
  border-bottom-color: #00ff88;
}

.queue-content,
.history-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.queue-content::-webkit-scrollbar,
.history-content::-webkit-scrollbar {
  width: 6px;
}

.queue-content::-webkit-scrollbar-track,
.history-content::-webkit-scrollbar-track {
  background: #1a1f2e;
}

.queue-content::-webkit-scrollbar-thumb,
.history-content::-webkit-scrollbar-thumb {
  background: #3d4751;
  border-radius: 3px;
}

.queue-item,
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin-bottom: 8px;
  background: #2a3441;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.queue-item.active {
  border-color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

.queue-info,
.history-info {
  flex: 1;
}

.queue-title,
.history-title {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4px;
}

.queue-details,
.history-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #7a8699;
}

.queue-actions {
  display: flex;
  gap: 4px;
}

.queue-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3d4751;
  border: none;
  border-radius: 4px;
  color: #7a8699;
  cursor: pointer;
  transition: all 0.3s ease;
}

.queue-btn:hover {
  background: #4a5563;
  color: #ffffff;
}

.queue-btn.danger:hover {
  background: #ff4757;
  color: #ffffff;
}

.queue-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.queue-btn svg {
  width: 14px;
  height: 14px;
}

.history-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.history-status.completed {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.history-status.interrupted {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.history-status.failed {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
}

.empty-queue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #7a8699;
  text-align: center;
}

.empty-queue svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* 紧急广播对话框 */
.emergency-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.emergency-dialog {
  width: 500px;
  background: #1a1f2e;
  border: 1px solid #2a3441;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: #ffffff;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.close-btn svg {
  width: 16px;
  height: 16px;
}

.dialog-content {
  padding: 20px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  background: rgba(42, 52, 65, 0.3);
}

.dialog-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dialog-btn.primary {
  background: #ff4757;
  color: #ffffff;
}

.dialog-btn.primary:hover {
  background: #ff3742;
}

.dialog-btn.secondary {
  background: #2a3441;
  color: #7a8699;
}

.dialog-btn.secondary:hover {
  background: #3d4751;
  color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .broadcast-content {
    flex-direction: column;
    gap: 12px;
  }

  .area-panel,
  .queue-panel {
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .broadcast-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .broadcast-status {
    flex-wrap: wrap;
    gap: 12px;
  }

  .emergency-dialog {
    width: 90%;
    margin: 0 16px;
  }
}
</style>